| vue | 您所在的位置：网站首页 › vue for循环要求文字渐变 › vue |
vue
|
vue——如何给v-for循环出来的元素设置不同的样式
{{i.english}} export default { data() { return { sstt: [ "ss1", "ss2", "ss3", "ss4", ], serve: [ { title: "苹果", english: "123" }, { title: "桃子", english: "456" }, { title: "香蕉", english: "789" }, { title: "梨", english: "1010" } ] }} } .ss1{ background: #71b262; color: red; } .ss2{ background: #6288b2; } .ss3 { background: #ecac60; } .ss4{ background: #f87171; }
例如给循环出来的四个盒子设置不同的背景色 第一步：给要循环的盒子动态绑定class名 并且传入一个数组 {{i.english}} 第二步：在data中定义这个数组 data() { return { sstt: [ "ss1", "ss2", "ss3", "ss4", ] }第三步：在style中分别设置颜色 .ss1{ background: #71b262; } .ss2{ background: #6288b2; } .ss3 { background: #ecac60; } .ss4{ background: #f87171; }完成啦 |
【本文地址】
公司简介
联系我们